<html>
    <head></head>
    <body>
        <form method="get" onsubmit="return mySubmit(this)">
            <div style="display: flex;justify-content: space-between;">
                <div>是否开启</div>
                <div>
                    <input type="checkbox" id="enabled" name="enabled"
                        value="enabled">
                </div>
            </div>
            <div
                style="display: flex;justify-content: space-between;margin-top: 20px;">
                <div>默认端口</div>
                <div>
                    <input id="port" type="number" 
                        id="port" name="port" value="7456">
                </div>
            </div>
            <div style="display: flex;justify-content: end;">
                <button id="btn" style="margin-top: 20px;">确认修改</button>
            </div>
        </form>
        <script>
        const initForm = (enabled,port) =>{
            document.getElementById("enabled").checked = enabled;
            document.getElementById("port").value = port;
        }
        function mySubmit(form){
			//定义formData对象
			let formData = new FormData(form);
			//获取值，因为get只能获取一个值，而这里是多选框，所以这里使用getAll方法
			let enabled = formData.get('enabled');
            let port = formData.get('port');
			console.log(enabled);
            console.log(port);
			//页面数据不进行提交，只是进行测试
			return false;
		}
        initForm('enabled','7456')
        
        </script>
    </body>
</html>